<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小U课堂</title>
    <link rel="shortcut icon" href=" ../favicon.ico" />
    <link rel="stylesheet" href="../font/iconfont.css">
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/videoDetail.css">
</head>

<body>
    <!-- 头部 -->
    <div class="head">
        <div class="main clearfix">
            <div class="head_left fl">
                <img src="../images/logo.png" alt="LOGO">
            </div>
            <div class="head_center fl">
                <ul class="clearfix">
                    <li><a href="../index.html">首页</a></li>
                    <li><a href="./syncCourse.html">同步课程</a></li>
                    <li><a href="./play.html">在线练习</a></li>
                    <li><a href="#">精品课程</a></li>
                </ul>
            </div>
            <div class="head_right fr">
                <div class="head_right_fl clearfix">
                    <div class="head_right_course fl">
                        <select name="" id="">
                            <option value="">html</option>
                            <option value="">css</option>
                            <option value="">js</option>
                        </select>
                        <i class="icon icon-sanjiaoxing"></i>
                        <!-- <div class="course_list">课程列表</div> -->
                    </div>
                    <div class="input fl">
                        <input type="text" placeholder="搜索感兴趣的内容">
                        <i class="icon icon-fangdajing"></i>
                    </div>
                </div>
                <div class="head_right_fr clearfix">
                    <div class="head_right_fr_login fl">登录 <span style="color: #333;">/</span></div>
                    <div class="head_right_fr_register fl">&nbsp;注册</div>
                </div>
                <div class="user display">
                    <img src="https://img1.baidu.com/it/u=2716398045,2043787292&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800"
                        alt="">
                    <div class="user_menu">
                        <p>我的课程</p>
                        <p>我的收藏</p>
                        <p>退出登录</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 头部 end -->

    <!-- 面包屑 -->
    <div class="crumbs">
        <div class="main">
            <ul class="crumbs_ul clearfix">
                <li>
                    <a href="javascript:void(0)">
                        首页
                        <i class="icon icon-jinrujiantou"></i>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)">
                        在线练习
                        <i class="icon icon-jinrujiantou"></i>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)">
                        练习详情
                        <i class="icon icon-jinrujiantou"></i>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 面包屑end -->

    <!-- 右侧视频播放菜单 -->
    <div class="video">
        <div class="main clearfix">
            <div class="video_fl fl">
                <!-- <video width="860" controls>
                    <source src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/812358b69886e576c66a01f1f00affe9.mp4"
                        type="video/mp4">
                    <source src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/812358b69886e576c66a01f1f00affe9.mp4"
                        type="video/ogg">
                    您的浏览器不支持 video 标签。
                </video> -->
                <img src="https://img0.baidu.com/it/u=516085723,1951879070&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281" alt="">
            </div>
            <div class="video_fr fr">
                <div class="right">
                    <p class="title">[2019年秋季] 初三数学班</p>
                    <ul>
                        <li>年级科目：初三数学</li>
                        <li>课时数量：15课时</li>
                        <li>开课时间：09月30日—12月20日</li>
                        <li>有效期至：2020年12月20日</li>
                        <li>距报名截止仅剩</li>
                        <li>
                            <span>33</span>天
                            <span>23</span>时
                            <span>23</span>分
                            <span>23</span>秒
                        </li>
                        <li class="price">
                            <span>¥199</span>
                            <span class="freeStudy">免费试学</span>
                        </li>
                        <li class="sale">
                            <span>¥199单独购买</span>
                            <span>￥99拼团</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 右侧视频播放菜单 -->

    <!-- 授课师资 -->
    <div class="teacher">
        <div class="main teacher_describe">
            <h2>授课师资</h2>
            <div class="teacherIntroduce clearfix">
                <div class="introduce_fl fl clearfix">
                    <div class="img fl">
                        <img src="https://img0.baidu.com/it/u=334973661,412364761&fm=26&fmt=auto" alt="">
                    </div>
                    <div class="name fl">
                        <h3>李晓明</h3>
                        <p>小U课堂高级讲师</p>
                    </div>
                    <!-- 右侧线条 -->
                    <i></i>
                </div>
                <div class="introduce_fr fl">
                    多年IT行业从业经验，精通常用的Web开发技术;熟悉主流的CMS、商城、论坛 等PHP开源产品，具有丰富的建站及二次开发经验，多个大型ERP系统的开发实
                    践经验;精通常用的PHP开发框架，对服务器架构及服务器日常运维等方面有一 定的研究。
                </div>
            </div>
        </div>
    </div>
    <!-- 授课师资end -->

    <!-- 下方课程视频 -->
    <div class="courseVideo">
        <div class="main">
            <div class="courseVideo_top">
                <div class="clearfix catalogueDetails">
                    <div class="courseCatalogue">课程目录</div>
                    <div class="courseDetails">课程详情</div>
                </div>
            </div>
            <div class="courseVideo_list">
                <ul class="list_ul">
                    <!-- <li>
                        <h2>第一章：公开课（含4期）<i class=" icon icon-sanjiaoxing"></i> </h2>
                        <div class="list_item">
                            <ul>
                                <li>
                                    <a href="javascript:void(0)" class="clearfix">
                                        <div class="fl icon icon-24gf-playCircle"></div>
                                        <div class="fl">第0节：化学的研究对象和研究方法</div>
                                        <div class="fl">已学完</div>
                                        <div class="fr">20：00</div>
                                        <span class="start fr">播放视频</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li> -->
                </ul>
                <!-- 点击展开查看全部 -->
                <div class="unfold">
                    <a href="javascript:void(0)">点击展开查看全部</a>
                </div>
                <!-- 点击展开查看全部end -->
            </div>
            <div class="details display" style="width: 1180px">
                <img src="../img/videoDetail/detail.png" alt="" style="width: 1180px">
            </div>
        </div>
    </div>
    <!-- 下方课程视频end -->

    <!-- 尾部 -->
    <div class="foot">
        <div class="main">
            <div class="friendship">
                <ul class="clearfix">
                    <li><a href="#">首页</a></li>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">加入我们</a></li>
                    <li><a href="#">合作专区</a></li>
                    <li><a href="#">联系我们</a></li>
                    <li><a href="#">AI开放平台</a></li>
                    <li><a href="#">意见反馈</a></li>
                    <li><a href="#">漏洞提交</a></li>
                    <li><a href="#">隐私政策</a></li>
                    <li><a href="#">版权声明</a></li>
                    <li><a href="#">反盗链声明</a></li>
                    <li><a href="#">网上有害信息举报</a></li>
                    <li><a href="#">备案公示</a></li>
                    <li><a href="#">营业执照</a></li>
                    <li><a href="#">教师资格证公示</a></li>
                </ul>
            </div>
            <p>京ICP备 13030888号 Copyright © 2014-2019 行者信息科技（北京）有限公司 | 地址：北京市新华区马当路388号C座 | 电话：010-66666666 | 京公网安备
                01010102002533号</p>
            <p>京网文〔2018〕4086-308号 | 网络文化经营许可证：沪网文󞪒]4086-308号 | 增值电信业务经营许可证：京B2-20150021 | 食品经营许可证：JY13101140088888</p>
            <p>医疗器械经营许可证：京嘉食药监械经营许20188008号 | 互联网药品信息服务资格证书：(京)-经营性-2018-0011 |</p>
        </div>
    </div>
    <!-- 尾部end -->

    <!-- 右侧固定菜单 -->
    <div class="fixed">
        <ul>
            <li><a href="javascript:void(0)"><i></i>我的考试</a></li>
            <li><a href="javascript:void(0)"><i></i>我的课程</a></li>
            <li><a href="javascript:window.scrollTo({left: 0, top: 0,behavior: 'smooth' })"><i
                        class="icon icon-shouqijiantouxiao"></i>返回顶部</a></li>
        </ul>
    </div>
    <!-- 右侧固定菜单end -->

    <!-- 登录/注册 -->
    <div class="logon_register display">
        <div class="main">
            <!-- 登录 -->
            <div class="logon display">
                <!-- 右上角关闭按钮 -->
                <i class="close icon icon-guanbi"></i>
                <div class="img">
                    <img src="../images/logo.png" alt="">
                </div>
                <!-- <div class="other clearfix">
                <i class="fl"></i>
                <i class="fr"></i>
                <span class="fl">使用第三方软件登陆</span>
                <div class="other_list clearfix">
                  <a href=""><i class="icon icon-weixin"></i></a>
                  <a href=""><i class="icon icon-QQ-circle-fill"></i></a>
                  <a href=""><i class="icon icon-weibo"></i></a>
                </div>
              </div> -->
                <div class="phone clearfix">
                    <i class="fl"></i>
                    <i class="fr"></i>
                    <span class="fl">使用手机号登陆</span>
                    <div class="form">
                        <input type="text" placeholder="请输入您的手机号">
                        <em></em>
                        <input type="password" placeholder="请输入密码">
                        <em></em>
                        <input type="button" value="登录" class="btn">
                        <div class="forget clearfix">
                            <div class="forget_fl fl">
                                <a href="javascript:void(0)">忘记密码？</a>
                            </div>
                            <div class="forget_fr fr">
                                <span>还没有账号?</span>
                                <a href="javascript:void(0)">点击注册</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="other clearfix">
                    <i class="fl"></i>
                    <i class="fr"></i>
                    <span class="fl">使用第三方软件登陆</span>
                    <div class="other_list clearfix">
                        <a href=""><i class="icon icon-weixin"></i></a>
                        <a href=""><i class="icon icon-QQ-circle-fill"></i></a>
                        <a href=""><i class="icon icon-weibo"></i></a>
                    </div>
                </div>
            </div>
            <!-- 注册 -->
            <div class="register">
                <!-- 右上角关闭按钮 -->
                <i class="close icon icon-guanbi"></i>
                <div class="img">
                    <img src="../images/logo.png" alt="">
                </div>
                <div class="phone clearfix">
                    <i class="fl"></i>
                    <i class="fr"></i>
                    <span class="fl">使用手机号登陆</span>
                    <div class="form">
                        <input type="text" placeholder="请输入您的手机号" >
                        <em></em>
                        <input type="password" placeholder="请输入密码" >
                        <em></em>
                        <input type="password" placeholder="请再次输入密码" >
                        <em></em>
                        <div class="verification clearfix">
                            <input type="text" placeholder="请输入验证码">
                            <span>3345</span>
                        </div>
                        <em></em>
                        <input type="button" value="注册" class="btn">
                        <div class="forget clearfix">
                            <div class="forget_fl fl">
                                <input type="checkbox">
                                <a href="javascript:void(0)">我同意《用户使用协议》</a>
                            </div>
                            <div class="forget_fr fr">
                                <span>已有账号</span>
                                <a href="javascript:void(0)">去登陆</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 登陆/注册end -->
    <script src="../js/data/videoDetaildata.js"></script>
    <script src="../js/public.js"></script>
    <script src="../js/videoDetail.js"></script>

</body>

</html>